<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<style>
    .box1 {
        width: 60%;
        border: 1px solid darkorchid;
        border-radius: 10px;
        padding: 20px;
    }

    .router-link-exact-active,
    .router-link-active {
        color: deeppink;
        border: 1px solid deepskyblue;
        padding: 5px;
        border-radius: 5px;
        background: darkslateblue;
    }

    .fade-enter-active {
        animation: bounceInLeft 1.3s;
    }

    .fade-leave-active {
        animation: bounceOutRight 1.3s;
    }

    .appear-slide {
        animation: rubberBand 1.3s;
    }
</style>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <!-- 5. 路由出口  声明加载路由的地址 -->
        <transition name='fade' model='out-in' appear appear-active-class="appear-slide">
            <router-view class='box1'></router-view>
        </transition>
        <hr>
        <router-link to="/home">Home组件</router-link>
        <router-link to="/find">find组件</router-link>
        <router-link to="/mine">Mine组件</router-link>
        <router-link to="/news">新闻</router-link>
    </div>


    <template id="head">
        <div>
            <h2>Head组件</h2>
        </div>
    </template>


    <template id="home">
        <div>
            <h2>Home组件</h2>
        </div>
    </template>


    <template id="find">
        <div>
            <h2>find组件</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine组件</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>News组件</h2>
        </div>
    </template>
    
    <script>

        const Head = {
            template: '#head'
        }
        Vue.component('myhead', Head);
        // 定义路由组件
        const Home = {
            template: '#home',
        }
        const Find = {
            template: '#find'
        }
        const Mine = {
            template: '#mine'
        }
        const News = Vue.extend(
            {
                template: "#news"
            }
        )
        const NotFound = {
            template: "<h1>404 - 404 - NotFound </h1>",
            methods: {}
        }


        //定义路由里面组件的地址路径的映射关系
        const routes = [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/find',
                component: Find
            },
            {
                path: "/mine",
                component: Mine
            },
            {
                path: '/news',
                component: News
            },
            {
                path: "/404",
                component: NotFound
            },
            {
                path: "*",
                component: NotFound
            }
        ]

        // 3. 创建路由对象 
        const router = new VueRouter({
            routes: routes
        })





        const vm = new Vue({
            // 第四步路由组件挂载到根实例
            router,
            data() {
                return {
                    title: '路由的初步学习',
                };
            },
            watch: {
                '$route': function (to, from) {
                    console.log(to)   // 即将进入的路由
                    console.log(from) // 即将离开的路由 
                }
            },
            mounted() {
                console.log(this.$router)  // router 路由对象  负责路由切换 重定向
                console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
            }
        }).$mount('#app')
    </script>
     <!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-appliaction     (SPA)

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
</body>

</html>